﻿@page "/docs/components/date"

<Seo Canonical="/docs/components/date" Title="Blazorise DateEdit component" Description="A native date input component." />

<DocsPageTitle>
    DateEdit component
</DocsPageTitle>

<DocsPageParagraph>
    A native date <Code Tag>input</Code> component built around the <Code>type="date"</Code>.
</DocsPageParagraph>

<DocsPageParagraph>
    Being built around native <Code>type="date"</Code> input element, the <Code>DateEdit</Code> component
    comes with a few limitations that you must be aware of. First and foremost, the input display format is fully
    controlled by the browser and the system locale. This means that for you to change the input format you would
    need to change the browser settings.
</DocsPageParagraph>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic example">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicDateEditExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicDateEditExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Binding
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Two-way binding">
        By using <Code>bind-*</Code> attribute the selected date will be automatically assigned to the member variable.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <DateEditWithBindExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DateEditWithBindExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Manual event binding">
        When using the event <Code>DateChanged</Code>, you also must define the <Code>Date</Code> value attribute.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <DateEditWithEventExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DateEditWithEventExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="DateTime">
        DateEdit component also support entering a time part. To enable it just set <Code>InputMode</Code> parameter.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <DateEditDateTimeExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DateEditDateTimeExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Attributes
</DocsPageSubtitle>

<DocsAttributes>
    <DocsAttributesItem Name="Date" Type="TValue" Default="default">
        Gets or sets the input date value.
    </DocsAttributesItem>
    <DocsAttributesItem Name="DateChanged" Type="@("EventCallback<TValue>")">
        Occurs when the date has changed.
    </DocsAttributesItem>
    <DocsAttributesItem Name="InputMode" Type="DateInputMode" Default="Date">
        Hints at the type of data that might be entered by the user while editing the element or its contents.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Min" Type="DateTimeOffset?" Default="null">
        The earliest date to accept.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Max" Type="DateTimeOffset?" Default="null">
        The latest date to accept.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Pattern" Type="string" Default="null">
        The pattern attribute specifies a regular expression that the input element’s value is checked against on form submission.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Placeholder" Type="string" Default="null">
        Sets the placeholder for the empty date.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Step" Type="int" Default="1">
        The step attribute specifies the legal day intervals to choose from when the user opens the calendar in a date field.
    </DocsAttributesItem>
</DocsAttributes>